<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>订单列表</title>
    <link rel="stylesheet" href="../../plugins/element-ui/index.css" />
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="../../plugins/vue/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="../../plugins/element-ui/index.js"></script>
    <!-- 引入axios -->
    <script src="../../plugins/axios/axios.min.js"></script>
</head>
<body>
<div id="app">
    <el-table :data="orders" style="width: 100%">
        <el-table-column prop="id" label="订单号" width="120"></el-table-column>
        <el-table-column prop="orderDate" label="订单日期" width="120"></el-table-column>
        <el-table-column prop="totalDmount" label="总金额" width="120"></el-table-column>
        <el-table-column prop="orderStatus" label="状态" width="120"></el-table-column>
        <el-table-column prop="totalQuantity" label="冰鲜数量" width="120"></el-table-column>
        <el-table-column prop="deliveryId" label="配送员编号" width="120"></el-table-column>
        <el-table-column prop="productId" label="商品编号" width="120"></el-table-column>
        <el-table-column prop="userId" label="顾客编号" width="120"></el-table-column>
        <el-table-column label="操作" width="120">
            <template slot-scope="scope" style="display: none">
<!--                <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>-->
                <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-pagination
            @current-change="handlePageChange"
            :current-page.sync="currentPage"
            :page-size="pageSize"
            :total="total"
            layout="total, prev, pager, next, jumper">
    </el-pagination>
    tips；注意：订单状态为Succeed（已完成）、Cancelled（已取消）、Delivered（已发货）、Processing（处理中）时，不能删除,
    订单状态为Pending（待处理）、Cancelled（已取消）时，可以删除，订单状态为Processing（处理中）时，不能编辑，订单状态为Pending（待处理）、Cancelled（已取消）、Delivered（已发货）时，可以查看。
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            orders: [],
            currentPage: 1,
            pageSize: 10,
            total: 0
        },
        methods: {
            // // 编辑订单
            // handleEdit(row) {
            //     if (row.orderStatus === 'Succeed' || row.orderStatus === 'Delivered' || row.orderStatus === 'Cancelled') {
            //         this.$message.error("已完成、已发货和已取消的订单不能编辑");
            //         return;
            //     }else if (row.orderStatus === 'Processing' || row.orderStatus === 'Pending') {
            //         window.location.href = "edit.html?id=" + row.id;
            //     }else {
            //         this.$message.error("订单状态异常，不能编辑");
            //     }
            // },
            // 删除订单
            handleDelete(row) {
                if (row.orderStatus === 'Succeed'|| row.orderStatus === 'Delivered'|| row.orderStatus === 'Processing') {
                    this.$message.error("已完成、已发货和处理中的订单不能删除");
                }else if (row.orderStatus === 'Pending'||row.orderStatus === 'Cancelled' ){
                    this.$confirm('确认删除该订单吗？')
                        .then(() => {
                            axios.delete('/orders/delete', {
                                params: {
                                    id: row.id
                                }
                            })
                                .then(response => {
                                    this.$message.success("删除订单成功");
                                    this.fetch(this.currentPage, this.pageSize);
                                })
                                .catch(error => {
                                    this.$message.error("删除订单失败:" + error.message);
                                });
                        })
                        .catch(() => {
                            this.$message.info('已取消删除');
                        });
                }
            },
            fetch(pageNum = 1, pageSize = 10) {
                axios.get('/orders/getOrders', {
                    params: {
                        pageNum: pageNum,
                        pageSize: pageSize
                    }
                })
                    .then(response => {
                        if (response.data) {
                            this.orders = response.data.records;  // 返回的数据结构中包含 `records`
                            this.total= response.data.total; // 返回的数据中包含 `total`
                        }
                    })
                    .catch(error => {
                        this.$message.error("获取订单列表失败:" + error.message);
                    });
            },
            handlePageChange(pageNum) {
                this.currentPage = pageNum;
                this.fetch(pageNum, this.pageSize);
            }
        },
        created() {
            this.fetch(this.currentPage, this.pageSize);
        }
    });
</script>
</body>
</html>
